<template>
    <div class="seq-container" ref="container" :style="{width: containerWidthPx}">
        <div class="seq-header">
            <template v-for="(item) in headers">
            <div class="seq-header-col" :style="{width:realColWidth-1+'px'}" :key="item" >{{item}}</div>
            </template>
        </div>
        
        <div class="seq-body"  :style="{width: containerWidthPx}">
            <RecycleScroller
              class="seq-scroller"
               :style="{width: containerWidthPx}"
              :items="items"
              :item-size="itemHeight"
              key-field="id"
              :prerender="prerender"
              :buffer="buffer"
              v-slot="{ item,index:itemIndex }"
            >

          
            <div class="seq-item"
                :key="'item-'+itemIndex"
                :style="{height:itemHeight+'px'}"
                >
                
              <!-- 分割线 -->
              <template v-for="(col,colIndex) in headers">
                <div class="seq-item-spliter" :key="'item-'+itemIndex+'-'+colIndex" 
                  :style="itemPositionArr[itemIndex].spliter"
                  ></div>
              </template>
              
              <!-- line a to b -->
              <div
                @click="$emit('line-click', itemIndex, item)"
                :key="'line-'+itemIndex"
                class="arrow_line"
                :class="lineDirectionClassArr[itemIndex]"
                :style="itemPositionArr[itemIndex].container"
              >
                <div class="arrow_to_left"></div>
                <div class="line"></div>
                <div class="arrow_to_right"></div>
                <div class="note">{{item.note}}</div>
                <div class="line_label" :style="itemPositionArr[itemIndex].label">{{item.label}}</div>
              </div>
              

            </div>

       
        </RecycleScroller>
        </div>
    </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
    name: 'SeqDiagram',
  props: {
    // 头部 ['header1','header2','header3']
    headers: {
      type: Array
    },
    // 数据 [{label:'',from:'',to:'',note:''}]
    items: {
      type: Array
    },
    // item高度 px
    itemHeight: {
      type: Number,
      default: 50
    },
    // 每一列的宽度，如果不填写，则根据总宽度计算
    colWidth: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      // 必须保持与css中的sideWidth一致，此属性尚不可使用，TODO
      sideWidth: 0,
      //容器总宽度
      width:0,
      buffer: 20,
      prerender: 500,
      colorList: [
        'SteelBlue',
        'coral',
        'DeepSkyBlue',
        'lightgreen',
        'SlateBlue',
        'HotPink',
        'Olive',
        'Sienna',
        'Tan'
      ]
    }
  },
  
  computed:{
      // 数据量
      itemCount: function(){
          return this.items.length ;
      },
      // 每一列的宽度
      realColWidth: function(){
        console.log("---------realColWidth-------------")
        if(this.colWidth){
          return this.colWidth ;
        }
        // 自己计算宽度
        return this.width/this.headers.length ;
      },
      containerWidthPx: function (){
        if(this.colWidth){
          return this.colWidth * this.headers.length +'px' ;
        }
        return null ;
        
      },
      
      // 所有线段的位置
      itemPositionArr: function(){
        console.log("itemPositionArr---------start-------------")
        var positionArr = [] 
        if(!this.items || !this.headers){
          return positionArr 
        }
        // 把headers转成对象，方便获取{"name":1}
        var headerObj = {} 
        for (var i = 0; i < this.headers.length; i++) {
          headerObj[this.headers[i]] = i 
        }

        this.items.forEach(item => {
          var left = this.sideWidth + headerObj[item.from]*this.realColWidth + this.realColWidth/2 + headerObj[item.from]  ;
          var right = this.sideWidth + headerObj[item.to]*this.realColWidth + this.realColWidth/2 + headerObj[item.to] ;
          positionArr.push({
            
            container: {
              width: Math.abs(right-left) + 'px',
              left: Math.min(left,right) + 'px'
            },
            label: {
              left: -1 * Math.min(left,right) + 'px'
            },
            spliter: {
              marginLeft: parseInt(this.realColWidth/2) + 'px',
              marginRight: (this.realColWidth-parseInt(this.realColWidth/2)) + 'px'
            }
          })
        });

        console.log("itemPositionArr---------end-------------")
        return positionArr 
      },
      // 所有行的from to 索引
      lineDirectionClassArr: function(){
        console.log("lineDirectionClassArr------------start-----")
        var classArr = [] 
        if(!this.items || !this.headers){
          return classArr 
        }
        // 把headers转成对象，方便获取{"name":1}
        var headerObj = {} 
        for (var i = 0; i < this.headers.length; i++) {
          headerObj[this.headers[i]] = i 
        }
        //计算每个记录对应的line class
        this.items.forEach(item => {
          var fromIndex = headerObj[item.from] 
          var toIndex = headerObj[item.to] 
          //line direction
          var lineClass = ""
          if(fromIndex < toIndex){
            lineClass = "line_right"
          }else if(fromIndex > toIndex){
            lineClass = "line_left"
          }
          classArr.push(lineClass)
        });
        console.log("lineDirectionClassArr------------end-----")
        return classArr 
      }
  },
  mounted() {
    var that = this ;
    this.$nextTick(function () {
      that.width = that.$el.clientWidth
      console.log("width="+that.width);
    })
  },
  components:{
      RecycleScroller
  }
  
}
</script>

<style lang="less" scoped>
//左右两侧空白
@sideWidth: 0px;

@px: 0.0625em;
@small_font_size: 10 * @px;
@midium_font_size: 12 * @px;
@large_font_size: 14 * @px;
@huge_font_size: 16 * @px;
@box_bordercolor: black;

@hover_box_bordercolor: red;
@hover_box_backcolor: #ccc;

    .seq-container {
        // height: 100% ;
       display: flex;
      flex-direction: column;
      margin: 0 @sideWidth ;
    }
    .seq-header {
        display: flex;
        flex: none;
        flex-direction: row;
        align-items: center;
        // padding: 0px @sideWidth ;
        height:50px;

        .seq-header-col{
            border: 1px solid ;
            background-color: #409EFF;
            color: white ;
            font-size: @large_font_size;
            height:100%;
            line-height: 50px;
            text-align: center ;
            margin: 10px 0px;
            flex-shrink: 0;
        }
    }

    .seq-body {
      position: relative;
      flex: auto;
      height: 600px ;
      margin: 0 -1*@sideWidth ;
    
    }

    .self_msg_line:hover {
      cursor: pointer;
      .link {
        border: @px solid @hover_box_bordercolor;
        border-left: 0;
      }
      .arrow:before {
        color: @hover_box_bordercolor;
      }

      .line_label {
        color: @hover_box_bordercolor;
      }
    }

      .seq-item {
        display: flex;
        flex-direction: row;
        // justify-content:space-around;
        align-items: center;
        // padding: 0px @sideWidth ;

        .seq-item-spliter {
          width: 0;
          height: 100%;
          border-left: 1px dashed black;
        }

        .arrow_line {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          height: @small_font_size;
          z-index: 0;
          width: 200px;
          .line {
            border-bottom: @px solid @box_bordercolor;
            height: 0;
            flex: 1;
          }
          .dashline {
            border-bottom: @px dashed @box_bordercolor;
            height: 0;
            flex: 1;
          }
          .arrow_to_right:before {
            content: '▶';
            color: @box_bordercolor;
            margin-left: -2px;
            font-size: 20px;
          }
          .arrow_to_left:before {
            content: '◀';
            color: @box_bordercolor;
            margin-right: -2px;
            font-size: 20px;
          }
          .note {
            position: absolute;
            margin: auto;
            top: -@huge_font_size;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
            font-size: @large_font_size;
            padding: 0 8 * @px 0 8 * @px;
            color: dimgray;
          }
          .line_label {
            position: absolute;
            font-size: @large_font_size;
            z-index: 0;
            text-align: left;
          }
        }
        .line_right{
          .arrow_to_right {
            display: block;
          }
          .arrow_to_left {
            display: none;
          }
        }
        .line_left{
          .arrow_to_right {
            display: none;
          }
          .arrow_to_left {
            display: block;
          }
        }
          

        .self_msg_line {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          height: @small_font_size;
          z-index: 0;
          width: 200px;
          .link {
            width: 1.5 * @huge_font_size;
            height: 1.5 * @huge_font_size;
            border: @px solid @box_bordercolor;
            border-left: 0;
          }
          .dashlink {
            width: 1.5 * @huge_font_size;
            height: 1.5 * @huge_font_size;
            border: @px dashed @box_bordercolor;
            border-left: 0;
          }
          .arrow:before {
            content: '◀';
            color: @box_bordercolor;
            position: absolute;
            left: 0;
            bottom: -1.25 * @large_font_size;
          }
          .note {
            flex: 1;
            text-align: left;
            font-size: @large_font_size;
            color: dimgray;
            padding-left: 5 * @px;
          }
        }

        .arrow_line:hover {
          cursor: pointer;
          background: @hover_box_backcolor;
          .line {
            border-bottom: @px solid @hover_box_bordercolor;
          }
          .dashline {
            border-bottom: @px dashed @hover_box_bordercolor;
          }
          .arrow_to_right:before {
            color: @hover_box_bordercolor;
          }
          .arrow_to_left:before {
            color: @hover_box_bordercolor;
          }
          .line_label {
            color: @hover_box_bordercolor;
          }
        }
      }
  .seq-scroller{
    width: auto;
    height: 100%;
  }
    
</style>
